// pages/search/search.js
import request from '../../utils/request';
// 用于防抖
let timer = null;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        placeholderContent: '', //placeholder的内容
        hotList: [], //热搜榜数据
        searchContent: '', //用户输入的表单项数据
        searchList: [], //关键字模糊匹配的数据
        historyList: [], //搜索历史记录
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        // 获取初始化的数据
        this.getInitData();

        // 获取本地历史记录的功能函数
        this.getSearchHistory();
    },

    // 获取初始化的数据
    async getInitData() {
        let placeeholderData = await request('/search/default');
        let hotListData = await request('/search/hot/detail');
        this.setData({
            placeholderContent: placeeholderData.data.showKeyword,
            hotList: hotListData.data
        });
    },

    // 获取本地历史记录的功能函数
    getSearchHistory() {
        let historyList = wx.getStorageSync('searchHistory');
        // 如果有值，就更新到本地data中
        if (historyList) {
            this.setData({
                historyList
            })
        }
    },

    // 表单项内容发生改变的回调
    handleInputChange(event) {
        // console.log(event);
        // 更新searchContent的状态数据
        this.setData({
            searchContent: event.detail.value.trim()
        });

        // 使用防抖，防止多次发送请求
        if (timer) {
            clearTimeout(timer);
        }

        let { searchContent, historyList } = this.data;
        timer = setTimeout(async() => {
            // 当搜索内容为空的时候直接return，不发请求
            if (!searchContent) {
                this.setData({
                    searchList: []
                });
                return
            }
            // 发请求获取关键字模糊匹配数据
            let searchListData = await request('/search', { keywords: searchContent, limit: 10 })
            this.setData({
                searchList: searchListData.result.songs
            })
        }, 300);

        // 将搜索的关键字添加到搜索历史记录中
        // 只有搜索内容不为空且搜索记录之前没有的才能unshift进数组中。
        if (searchContent && historyList.indexOf(searchContent) === -1) {
            historyList.unshift(searchContent);
        } else {
            // 如果记录已存在，就把之前的删了，新unshift一个进去
            // 在搜索内容不为空的时候才执行
            if (searchContent) {
                historyList.splice(historyList.indexOf(searchContent), 1);
                historyList.unshift(searchContent);
            }
        }
        // 统一修改data中的 historyList
        this.setData({
            historyList
        });
        // 搜索记录要存到本地，不然一刷新页面就没了
        wx.setStorageSync('searchHistory', historyList);

    },

    // 清空搜索内容
    clearSearchContent() {
        this.setData({
            searchContent: '',
            searchList: [], //让搜索内容隐藏
        })
    },

    // 删除搜索历史记录
    deleteSearchHistory() {
        // 弹框询问用户
        wx.showModal({
            content: '确认删除吗？',
            showCancel: true,
            cancelText: '取消',
            cancelColor: '#000000',
            confirmText: '确定',
            confirmColor: '#3CC51F',
            success: (res) => {
                // console.log(res);
                if (res.confirm) {
                    // 清空data中的 historyList
                    this.setData({
                        historyList: []
                    });
                    // 移除本地的历史记录缓存
                    wx.removeStorageSync('searchHistory');
                }
            },

        });


    },

    // 发请求获取关键字模糊匹配数据
    // async getSearchListData() {
    //     let searchListData = await request('/search', { keywords: this.data.searchContent, limit: 10 })
    //     this.setData({
    //         searchList: searchListData.result.songs
    //     })
    // },


    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {

    }
})